<template>
    <div class="login-container">
        <div class="bg-image"></div>
        <el-card class="login-card" shadow="hover">
            <h1>TMS物流管理系统 - 登录</h1>
            <el-form :model="loginForm" status-icon :rules="loginFormRole" ref="loginForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="登录名" prop="username">
                    <el-input type="text" v-model="loginForm.username" autocomplete="off"
                        @keyup.enter.native="handleLogin()" @blur="getCaptchaImage"> </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginForm.password" autocomplete="off"
                        @keyup.enter.native="handleLogin()"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="captcha" style="text-align:left">
                    <el-input v-model="loginForm.captcha" style="width:80%;" @keyup.enter.native="handleLogin()">
                    </el-input>
                    <img :src="captchaSrc" style="float:right" width="80px" height="40px" @click="getCaptchaImage()" />
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="handleLogin()" style="width:80%" :loading="loadLoginBtn"
                @keyup.enter="handleLogin">登录</el-button> <br>
            <!-- <el-button type="text" @click="handleToRegister()" style="float:right">没有账号? 先去注册</el-button> -->
        </el-card>
    </div>
</template>

<script>

import 'animate.css';
import adminApi from '@/api/admin'

export default {
    name: 'Login',

    data() {
        return {
            loadLoginBtn: false,
            captchaSrc: '',         // 验证码图片, 通过向后台请求获得
            loginForm: {
                username: '',
                password: '',
                captcha: ''
            },
            loginFormRole: {
                username: [
                    { required: true, message: '昵称不能为空', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                ],
                captcha: [
                    { required: true, message: '验证码不能为空', trigger: 'blur' },
                    { max: 4, message: '验证码不超过四位', trigger: 'blur' },
                ]
            }
        };
    },

    created() {
        // 获取验证码图片
        this.getCaptchaImage()
    },

    mounted() {
    },

    methods: {
        handleLogin() {
            this.$refs['loginForm'].validate(valid => {
                if (valid) {
                    this.loadLoginBtn = true;
                    setTimeout(() => this.loadLoginBtn = false, 1000)
                    // 首先检验验证码是否通过
                    adminApi.verifyCaptcha(this.loginForm.username, this.loginForm.captcha)
                        .then(
                            () => {         // 当验证成功后再进行登录
                                this.$store.dispatch('admin/login', this.loginForm)
                                    .then(
                                        () => {
                                            this.$message.success('登录成功!')
                                            setTimeout(() => this.$router.push('/admin'), 1000)
                                        }
                                    )
                            }
                        )

                } else {
                    this.$message.warning('请输入正确的登录信息')
                    return false
                }
            })

        },
        // 跳转到注册
        handleToRegister() { this.$router.push({ path: '/register' }) },
        // 获取验证码图片
        getCaptchaImage() {
            adminApi.GetCaptchaImage(this.loginForm.username || 'default')
                .then(
                    (response) => {
                        this.captchaSrc = response.data.item
                    }
                )
        }
    },
    beforeDestroy() {
    }
};
</script>

<style scoped>
.bg-image {
    background: url('@/assets/back.jpg');
    background-size: 100vh;
    height: 100vh;
    width: 100%;
    margin: 0px;
    padding: 0px;
    object-fit:cover;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -100;
}

.login-card {
    margin-top: 100px;
    width: 600px;
    margin-inline: auto;
}

.login-container {
    text-align: center;
}
</style>